.exception {
  width: 100%;
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-sizing: border-box;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .header_left {
      display: flex;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      color: rgb(0 0 0 / 65%);
      align-items: center;

      .title {
        display: flex;
        margin-right: 20px;
        align-items: center;
      }

      .num {
        padding: 2px 10px;
        margin-left: 5px;
        font-size: 12px;
        background-color: rgb(0 0 0 / 3%);
        border-radius: 10px;
        transform: scale(0.8);
      }
    }

    .header_right {
      display: flex;
      align-items: center;

      .header_right_action {
        margin-left: 10px;
        color: #646566;
        cursor: pointer;
      }
    }
  }

  .body {
    .loading_box {
      display: flex;
      align-items: center;
    }

    .item {
      position: relative;
      padding: 10px 8px;
      font-size: 14px;
      font-weight: 400;
      color: rgb(0 10 26 / 45%);
      cursor: pointer;
      border-bottom: 1px solid #f7f7f7;

      .itme_tip {
        position: absolute;
        top: -55px;
        right: 200px;
        width: 100px;
        height: 38px;
        font-size: 14px;
        line-height: 38px;
        color: #fff;
        text-align: center;
        background-color: #000;
        border-radius: 8px;
        box-shadow:
          0 3px 6px -4px rgb(0 0 0 / 12%),
          0 6px 16px 0 rgb(0 0 0 / 8%),
          0 9px 28px 8px rgb(0 0 0 / 5%);

        &::before {
          position: absolute;
          bottom: 0;
          left: 30px;
          width: 0;
          height: 0;
          margin-bottom: -15px;
          border: 10px solid transparent;
          border-radius: 8px;
          content: '';
          border-top-color: #000;
        }

        &::after {
          position: absolute;
          bottom: 0;
          left: 30px;
          width: 0;
          height: 0;
          margin-bottom: -15px;
          border: 10px solid transparent;
          border-radius: 8px;
          content: '';
          border-top-color: #000;
        }
      }

      .itme_content {
        display: flex;

        .left {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          .title {
            margin-right: 8px;
            font-size: 14px;
            font-weight: 500;
            color: rgb(0 10 26 / 89%);
          }
        }

        .right {
          display: flex;
          flex-direction: column;
          flex: 1;

          .right_top {
            display: flex;
            align-items: center;

            .date,
            .times,
            .tool {
              margin: 0 8px;
              font-size: 14px;
              font-weight: 400;
              color: rgb(0 10 26 / 89%);
            }
          }

          .right_bottom {
            display: flex;
            width: 100%;
            font-size: 12px;
            box-sizing: border-box;
            align-items: center;

            .label {
              font-weight: 400;
              line-height: 24px;
              color: rgb(0 10 26 / 45%);
            }

            .value {
              width: 0;
              overflow: hidden;
              font-weight: 400;
              color: rgb(0 10 26 / 89%);
              text-overflow: ellipsis;
              white-space: nowrap;
              flex: 1;
            }
          }
        }
      }
    }

    .item:hover {
      box-shadow:
        0 1px 2px -2px rgb(0 0 0 / 16%),
        0 3px 6px 0 rgb(0 0 0 / 12%),
        0 5px 12px 4px rgb(0 0 0 / 9%);
      border-radius: 8px;
    }

    .content_empty {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .footer {
    margin-top: 16px;
    font-size: 14px;
    font-weight: 500;
    color: #2f54eb;

    .btn {
      cursor: pointer;
    }
  }
}
